import type { UploadFile } from 'element-plus';

import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { SystemApi } from '#/api/system/system';

import { h } from 'vue';

import { useAccess } from '@vben/access';
import { useAppConfig } from '@vben/hooks';
import { Plus } from '@vben/icons';

import { ElIcon } from 'element-plus';

const { hasAccessByCodes } = useAccess();
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'id',
      component: 'Input',
      dependencies: {
        triggerFields: [''],
        show: () => false,
      },
    },
    {
      component: 'Upload',
      fieldName: 'image',
      label: '系统图标',
      componentProps: {
        accept: 'image/*',
        action: `${apiURL}/upload`,
        limit: 1,
        name: 'file',
        showUploadList: false,
        listType: 'picture-card',
        onSuccess: (response: any, file: UploadFile) => {
          // 处理上传成功的响应
          if (
            response &&
            response.code === 0 &&
            response.data &&
            response.data.length > 0
          ) {
            const uploadedFile = response.data[0];
            // 更新文件对象的 URL，确保表单能获取到正确的服务器返回的 URL
            file.url = uploadedFile.url;
            // 重要：将服务器返回的 URL 存储到 response.url 中，这样表单提交时会优先使用 response.url
            file.response = {
              ...response,
              url: uploadedFile.url,
            };
          }
        },
      },
      renderComponentContent: () => {
        return {
          default: () => h(ElIcon, {}, () => [h(Plus, {}, '')]),
        };
      },
      rules: 'required',
    },
    {
      fieldName: 'name',
      label: '系统名称',
      component: 'Input',
      rules: 'required',
    },
    {
      fieldName: 'systemKey',
      label: '系统标识',
      component: 'Input',
      rules: 'required',
    },
    {
      fieldName: 'url',
      label: '系统地址',
      component: 'Input',
      rules: 'required',
    },
    {
      fieldName: 'loginCallbackUrl',
      label: '验证地址',
      component: 'Input',
      rules: 'required',
    },
    {
      fieldName: 'systemDesc',
      label: '系统描述',
      component: 'Textarea',
    },
  ];
}

export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'name',
      label: '系统名称',
      component: 'Input',
    },
    {
      fieldName: 'systemKey',
      label: '系统标识',
      component: 'Input',
    },
  ];
}

/** 列表的字段 */
export function useGridColumns<T = SystemApi.System>(
  onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
  return [
    {
      type: 'seq',
      title: '序号',
      width: 50,
    },
    {
      field: 'systemInfo',
      slots: { default: 'system-info' },
      title: '系统信息',
      minWidth: 250,
    },
    {
      field: 'loginCallbackUrl',
      title: '验证地址',
      minWidth: 100,
    },
    {
      field: 'systemKey',
      title: '系统标识',
      minWidth: 100,
    },
    {
      field: 'editInfo',
      title: '编辑信息',
      slots: { default: 'edit-info' },
      minWidth: 200,
    },
    {
      field: 'operation',
      title: '操作',
      width: 240,
      fixed: 'right',
      align: 'center',
      cellRender: {
        attrs: {
          nameField: 'system',
          nameTitle: '系统',
          onClick: onActionClick,
        },
        name: 'CellOperation',
        options: [
          {
            code: 'open-permission-manager',
            text: '权限管理',
            show: hasAccessByCodes(['system:system:menu']),
          },
          {
            code: 'open-api-manager',
            text: 'API管理',
            show: hasAccessByCodes(['system:system:api']),
          },
          {
            code: 'edit',
            show: hasAccessByCodes(['system:system:edit']),
          },
          {
            code: 'delete',
            show: hasAccessByCodes(['system:system:delete']),
          },
        ],
      },
    },
  ];
}
